import "./index.scss"
import {View, Text, Image, Button, Input, Picker} from "@tarojs/components"
import {observer} from "mobx-react"
import {useContext, useEffect, useState} from "react"
import Taro, {useDidHide, useDidShow, useRouter} from "@tarojs/taro"
import {AtButton, AtSegmentedControl, AtIcon, AtInputNumber, AtCheckbox} from "taro-ui"
import {getStorage} from "@/utils/localstoreage"
import staticData from "./data.json"
import {getHexByTimes, getTimesFunc, mathTimeFunc} from "./utils"

const G1680AControl = () => {
	let router = useRouter()

	// devGId
	const [devGId, setDevGId] = useState("")

	// devId
	const [devId, setDevId] = useState("")

	/* 当前测量模式 */
	//  1:连续测量模式   2:间隔测量模式    4:整点测量模式   8:反控测量模式
	const [currentMeasureMode, setCurrentMeasureMode] = useState(0)

	// 间隔测量模式间隔
	const [continuousMeasureInterval, setContinuousMeasureInterval] = useState(0)

	const [checkedList, setCheckedList] = useState([])

	let checkboxOption = [
		{
			value: 0,
			label: "00:00",
			desc: ""
		},
		{
			value: 1,
			label: "01:00"
		},
		{
			value: 2,
			label: "02:00",
			desc: ""
		},
		{
			value: 3,
			label: "03:00",
			desc: ""
		},
		{
			value: 4,
			label: "04:00",
			desc: ""
		},
		{
			value: 5,
			label: "05:00"
		},
		{
			value: 6,
			label: "06:00",
			desc: ""
		},
		{
			value: 7,
			label: "07:00",
			desc: ""
		},
		{
			value: 8,
			label: "08:00",
			desc: ""
		},
		{
			value: 9,
			label: "09:00",
			desc: ""
		},
		{
			value: 10,
			label: "10:00",
			desc: ""
		},
		{
			value: 11,
			label: "11:00",
			desc: ""
		},
		{
			value: 12,
			label: "12:00",
			desc: ""
		},
		{
			value: 13,
			label: "13:00"
		},
		{
			value: 14,
			label: "14:00",
			desc: ""
		},
		{
			value: 15,
			label: "15:00",
			desc: ""
		},
		{
			value: 16,
			label: "16:00",
			desc: ""
		},
		{
			value: 17,
			label: "17:00"
		},
		{
			value: 18,
			label: "18:00",
			desc: ""
		},
		{
			value: 19,
			label: "19:00",
			desc: ""
		},
		{
			value: 20,
			label: "20:00",
			desc: ""
		},
		{
			value: 21,
			label: "21:00"
		},
		{
			value: 22,
			label: "22:00",
			desc: ""
		},
		{
			value: 23,
			label: "23:00",
			desc: ""
		}
	]

	// 模式名称匹配
	const modeNameMath = key => {
		console.log(key)

		let name
		switch (key) {
			case 1:
				name = "连续测量模式"

				break
			case 2:
				name = "间隔测量模式"

				break
			case 4:
				name = "整点测量模式"
				break
			case 8:
				name = "反控测量模式"

				break

			default:
				name = "未选择"
				break
		}
		return name
	}

	// 整点选择change事件
	const timeSelectChange = e => {
		setCheckedList(e)
	}

	// 间隔测量模式change事件
	const continuousMeasureIntervalChange = e => {
		console.log("change")

		console.log(e)
		setContinuousMeasureInterval(e)
	}

	// 模式选择change事件
	const modeSelectChange = e => {
		console.log("触发模式选择")

		console.log(e.target.value)
		setCurrentMeasureMode(staticData.modeNumOptions[Number(e.target.value)])
	}

	useEffect(() => {
		console.log(Number(router.params.devId))
		setDevGId(router.params.devGId)
		setDevId(Number(router.params.devId))
	}, [])

	// 保存配置点击事件
	const saveSetClick = () => {
		let data = {
			measurementMode: currentMeasureMode,
			timeInterval: continuousMeasureInterval,
			integralPoint: getHexByTimes(checkedList)
		}

		console.log("#保存配置数据", data)
	}

	// 启动测量点击事件
	const startMeasureClick = () => {}

	// 停止测量点击事件
	const stopMeasureClick = () => {}
	/* 数据  -------------------------------------------------------------------------- */

	return (
		<View className="g1680a_control_wrap">
			<View className="hanzi text-16 font-bold mt-14 mb-14 px-16">G1680A控制</View>
			<View className="hanzi text-14 text-xx_text mb-14 px-16">
				您可以对G1680A类型设备进行相关控制
				<View className="set_box">
					<View className="set_item_box">
						<Text className="label">测量模式</Text>
						<View className="picker">
							<Picker
								range={staticData.modeOptions}
								mode="selector"
								onChange={e => {
									modeSelectChange(e)
								}}
							>
								{modeNameMath(currentMeasureMode)}
								<AtIcon
									value="chevron-right"
									size="20"
									color="#ccc"
									className="r_icon"
								></AtIcon>
							</Picker>
						</View>
					</View>
					<View className="set_item_box">
						<Text className="label">间隔测量模式间隔</Text>
						<View>
							<AtInputNumber
								min={0}
								max={599999}
								step={1}
								value={continuousMeasureInterval}
								onChange={e => {
									continuousMeasureIntervalChange(e)
								}}
							/>
							<Text className="unit">秒</Text>
						</View>
					</View>
					<View className="set_item_box integral_point_set_box">
						<View className="title_box">
							<Text className="label">整点测量模式时间设置</Text>
						</View>
						<View className="integral_point_check_box">
							<AtCheckbox
								options={checkboxOption}
								selectedList={checkedList}
								onChange={e => {
									console.log(e)

									timeSelectChange(e)
								}}
							/>
						</View>
					</View>
				</View>
				<View className="action_box">
					<Button
						type="primary"
						style="padding:0px 20px;background:#0f8af9;margin-top:10px;"
						onClick={saveSetClick}
					>
						保存配置
					</Button>

					<Button
						type="primary"
						style="padding:0px 20px;margin-top:10px;"
						onClick={startMeasureClick}
					>
						启动测量
					</Button>

					<Button
						type="warn"
						style="padding:0px 20px;margin-top:10px;"
						onClick={stopMeasureClick}
					>
						停止测量
					</Button>
				</View>
			</View>
		</View>
	)
}
export default observer(G1680AControl)
